<template lang="pug">
.wrapper
  .btnWrap(v-if="isShowBtn")
    van-button(icon="star-o" size="small" type="info" @click="confirmBtn") 确定位置
    van-button(icon="star-o" size="small" type="info" @click="cancelBtn") 关闭
  .page.say-frame(v-if="isShow")
    CtrlBar(@closeBar='closeBtn')
    .say-wrap(v-if="themeId != 4")
      van-field(
        v-model="message",
        label="发表说一说:",
        type="textarea",
        placeholder="请输入内容，限50字以内",
        rows="3",
        autosize)
      .btn-group
        van-button(size="large", @click="submitComment") 提交
        
    .newtpl-say(v-if="themeId == 4")
      .title 发表说一说
      .editor
        textarea(placeholder="请输入内容，限50字以内", v-model="message")
        .option
          .button(@click="submitComment") 发表
</template>

<script>
import CtrlBar from '@/components/CtrlBar'
import { handleSubmitSay } from '@/utils/menu'
import { getTextLength } from '@/utils'
import { mapGetters } from "vuex";
import { setTimeout } from 'timers';
export default {
  data() {
    return {
      isShowBtn:false,
      isShow: false,
      message: '',
    }
  },
  mounted() {
    this.$vgo.on('say:show', () => {
      setTimeout(() => {
        this.isShowBtn = true
      }, 300)
      this.$krp.onShowSay()

      // this.show()
    })
    
  },
  computed: {
    ...mapGetters(['themeId'])
  },
  methods: {
    show() {
      this.isShow = true
    },
    hide() {
      this.isShow = false
      this.message = ''
    },
    confirmBtn(){
      this.show()
      this.isShowBtn = false
    },
    cancelBtn(){
      this.isShowBtn = false
      this.$krp.removeDragSayModel()
    },
    closeBtn(){
      this.isShow = false
      this.$krp.removeDragSayModel()
    },
    submitComment() {
      if(!this.message || this.message == '') {
        this.$vgo.tip('随便写些什么吧！^~^', 'fail')
        return
      }

      // 限制100个字符 中文50个字
      if(getTextLength(this.message) > 100) {
        this.$vgo.tip('说说字数不能超过50个', 'fail')
        return
      }

      handleSubmitSay(this.message)
      this.hide()
    }
  },
  components: {
    CtrlBar
  }
}
</script>

<style lang="stylus">
.btnWrap
  position: absolute;
  bottom: 150px;
  z-index: 100;
  width: 60%;
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  transform: translateX(-50%);
  margin-left: 50%;
.say-frame
  .say-wrap
    position: absolute
    bottom: 0
    right: 0
    top: auto
    width: 100%
    padding: 20px 10px
    box-sizing: border-box
    background-color: #fff
  .btn-group
    padding: 0 10px
    box-sizing: border-box
    margin-top: 20px
  .van-field__control
    width: 100%
  .newtpl-say
    position: absolute
    box-sizing border-box
    background-color rgba(0, 0, 0, .3)
    bottom: 0
    right: 0
    min-height 118px
    width 100vw
    padding 0 10px
    .title
      font-size 12px
      line-height 33px
      color #fff
    .editor
      min-height 70px
      width 100%
      display flex
      align-items center
      border-radius 6px
      overflow hidden
      background-color #fff
      textarea
        flex 1
        min-height 70px
        border none
        color #666
      .option
        flex 0 0 65px
        text-align center
        .button
          display inline-block
          border-radius 4px
          color #fff
          cursor pointer
          line-height 22px
          font-size 12px
          background-color #05b7fc
          padding 0 11px
.van-button--small
  background-color: #2ea1ef;
  border: 0px;
  color: #fff;
</style>
